<template>
    <div>
        <div style="padding-bottom:55px;">
            <div class='top-bar'>
                <label class='top-left-label'>取单时间</label>
                <label v-if="order_type == 'now'" class='top-right-label activity-color'>现在下单，稍后即取</label>
                <picker v-else mode="time" :start="shop.begin_time" :end="shop.end_time" @change="selectTime">
                    <div class="picker">
                        <label class='top-right-label activity-color'>
                            <span style="display:inline-block;position:absolute;bottom:5px;right:35px;">{{order_time}}</span>
                            <span class="iconfont icon-xiajiantou xiajiantou"></span>
                        </label>
                    </div>
                </picker>
            </div>
            <!-- 订单详情 -->
            <div class='order-info'>
                <div class='order-info-title'>订单详情</div>
                <div class='cart-list-box' v-for="(item,index) in cart_list" :key="index">
                    <div class='list-info'>
                        <div>{{item.product_name}}</div>
                        <div class='list-info-size'>{{item.detail}}</div>
                    </div>
                    <div style='width:30%;'>
                        <div style='height:50px;line-height:50px;text-align:center;'>
                            <div v-if="user.is_vip=='Y'">
                                <text v-if="(item.vip_price&&item.vip_price!=0)">
                                    <text style='text-decoration:line-through;padding-right:10px;'>
                                      ￥{{item.attrs_price/100+item.price/100}}
                                    </text>
                                    <text style='color:red;'>￥{{item.attrs_price/100+item.vip_price/100}}</text>
                                </text>
                                <text v-else>
                                    ￥{{item.attrs_price/100+item.price/100}}
                                </text>
                            </div>
                            <div v-else>
                              ￥{{item.attrs_price/100+item.price/100}}
                            </div>
                        </div>
                    </div>
                    <div style='width:20%;'>
                        <div style='height:50px;line-height:50px;text-align:center;float:right;padding-right:12px;'>
                            <div>x {{item.num}}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="height:10px;"></div>
            <div class="order-info order-sum" v-for="(item,index) in discount_items" :key="index">
              <label class='order-cut-note'>{{item.item_name}}</label>
              <label class='order-cut-number'>-￥{{item.item_count/100}}</label>
            </div>
            <div class='order-info'>
                <div class='order-sum' @click="selectCoupons">
                    优惠券
                    <span style="float:right;position: relative;text-align: center;">
                        <span v-if="(select_coupon&&select_coupon.title!='')" class='activity-color' >{{select_coupon.title}}  &nbsp;&nbsp;</span>
                        <span v-if="!(select_coupon&&select_coupon.title!='')" style="padding-right:12px;">点击选择</span>
                          &nbsp;&nbsp;<span class="zan-arrow arrow"></span>
                    </span>
                </div>
            </div>
            <div class='order-info'>
                <radio-group class="radio-group" @change="radioChange">
                    <div class='order-sum' @click="handleRadio(true)">
                        <label class="radio-label">
                            微信支付
                            <radio value="wechat_pay" color="black" :checked="radioChecked" style="float:right;"/>
                        </label>
                    </div>
                    <div class='order-sum' @click="handleRadio(false)" v-if="user.is_vip=='Y'">
                        <label class="radio-label">
                            会员支付
                            <radio value="card_pay" color="black" :checked="!radioChecked" style="float:right;"/>
                        </label>
                    </div>
                </radio-group>
                <!-- <div class='order-sum'>
                    <label>应付：￥ {{sumMonney/100}}</label>
                    <label class='order-sum-number activity-color'>实付：￥ {{not_pay_amount/100-discount_coupon_amount/100}}</label>
                  </div> -->
            </div>
            <!-- 备注 -->
            <div class='note'>
                <label style='font-size:13px;color:#A3A3A3'>备注</label>
                <textarea placeholder='默认常温，常规糖，如有口味要求，请输入备注' class='note-text' v-model="remark"></textarea>
            </div>
        </div>
        <!-- 底部操作栏 -->
        <div class="operate-bar">
            <div class='gouwuche'>
                <div style='padding:5px;display:flex'>
                    <div class="zan-icon zan-icon-cart icon-cart">
                        <div class="number-msg" v-if="cart_list.length!=0">{{cupNumber}}</div>
                    </div>
                    <div class='gouwuche-price'>¥ {{pay_amount/100}}</div>
                </div>
            </div>
            <div class="submit-btn activity-color-bg" @click='gopay'>
                <div class="submit-btn-label">支付</div>
            </div>
        </div>
    </div>
</template>

<script>
    import api from '@/utils/api'
    import {mapActions, mapGetters} from 'vuex'

    export default {
        data() {
            return {
                payType: 'wechat_pay',
                sumMonney: 0,
                cupNumber: 0,
                radioChecked: true,
                discount_items:[],
                pay_amount: 0,
                remark:""
            }
        },
        computed: {
            ...mapGetters([
                'user',
                'login_info',
                'time_ranges',
                'cart_list',
                'order_type',
                'order_time',
                'shop',
                'select_coupon'
            ]),
        },
        onShow() {
            this.prePay()
        },
        methods: {
            ...mapActions([
                'clearAllData'
            ]),
            prePay() {
                let self = this
                let form = {
                    shop_id: this.shop.id,
                    user_id: this.user.id,
                    order_items: this.cart_list,
                }
                if (this.select_coupon && this.select_coupon.id > 0) {
                    // 选择了优惠券
                    form.pay_coupons=[{coupon_id:this.select_coupon.id}]
                }
                console.log(form)
                api.postPayCenterPrepay(form).then(res => {
                    if (res.code == 0) {
                        this.pay_amount = res.data.pay_amount
                        this.discount_items = res.data.item
                    }
                })
            },
            gopay() {
                let self = this
                let order_info = {
                    brand_id: this.login_info.brand_id,
                    shop_id: this.shop.id,
                    shop_name: this.shop.name,
                    order_items: this.cart_list,
                    user_id: this.user.id,
                    open_id: this.user.open_id,
                    mini_pay_method: this.payType,
                    remark: this.remark,
                }
                if (this.select_coupon && this.select_coupon.id>0) {
                    order_info.pay_coupons=[{coupon_id:this.select_coupon.id}]
                }
                api.payCenter(order_info).then(res => {
                    if (res.code == 0) {
                        if (this.payType == "wechat_pay") {
                            wx.requestPayment({
                                'timeStamp': res.data.timeStamp,
                                'nonceStr': res.data.nonceStr,
                                'package': res.data.package,
                                'signType': res.data.signType,
                                'paySign': res.data.paySign,
                                success(result) {
                                    wx.showToast({
                                        title: '支付成功',
                                        icon: 'success'
                                    })
                                    self.clearData()
                                    self.refreshUser()
                                    wx.redirectTo({
                                        url: "order_detail?order_id=" + res.data.order_id
                                    })
                                },
                                fail(result) {
                                    console.log('支付失败：', result)
                                }
                            })
                        } else {
                            wx.showToast({
                                title: '支付成功',
                                icon: 'success'
                            })
                            self.clearData()
                            self.refreshUser()
                            wx.redirectTo({
                               url: "order_detail?order_id=" + res.data.order_id
                            })
                        }
                    }
                })
            },
            clearData(){
              this.clearAllData()
              this.$store.dispatch('setSelectCoupon', '')
            },
            selectTime(e) {
                let time = e.target.value
                this.$store.dispatch("setOrderTime", time)
            },
            selectCoupons() {
                wx.navigateTo({
                    url: 'order_coupon'
                })
            },
            radioChange(e) {
                this.payType = e.target.value
            },
            handleRadio(checked) {
                this.radioChecked = checked
                if (checked) {
                    this.payType = 'wechat_pay'
                } else {
                    this.payType = 'card_pay'
                }
            },
            refreshUser() {
                api.getUserByOpenid({
                    openid: this.user.open_id
                }).then(res => {
                    if (res.code == 0) {
                        this.$store.dispatch('setUser', res.data)
                    }
                })
            },
        },
        mounted() {
            this.payType = 'wechat_pay'
            this.radioChecked = true
            this.cupNumber = 0
            this.sumMonney = 0
            this.cart_list.forEach(item => {
                this.sumMonney += item.sum_price
                this.cupNumber += item.num
            })
        },
        onUnload() {
            this.clearData()
        }
    }
</script>

<style>
    page {
        background: #F8F8F8;
    }

    radio {
        transform: scale(0.7);
    }

    .xiajiantou {
        color: #8A8A8A;
        font-size: 25px;
    }

    .operate-bar {
        z-index: 1001;
        position: fixed;
        bottom: 0px;
        height: 55px;
        line-height: 55px;
        width: 100%;
        display: flex;
    }

    .gouwuche {
        width: 75%;
        background: #353535;
        height: 100%;
    }

    .gouwuche-icon {
        font-size: 40px;
        color: #87888E;
        margin-left: 10px;
        position: relative;
    }

    .number-msg {
        background: red;
        color: white;
        font-size: 10px;
        width: 20px;
        height: 20px;
        line-height: 20px;
        border-radius: 10px;
        position: absolute;
        text-align: center;
        top: 5px;
        left: 50px;
    }

    .icon-cart {
        color: white;
        font-size: 35px;
        height: 55px;
        line-height: 55px;
        padding-left: 20px;
    }

    .gouwuche-price {
        display: flex;
        align-items: center;
        margin-left: 30px;
        color: white;
        font-size: 25px
    }

    .submit-btn {
        height: 100%;
        background: #F7F7F7;
        width: 25%;
        display: flex;
    }

    .submit-btn-label {
        color: white;
        font-size: 20px;
        margin: auto;
    }

    .activity-color {
        color: #FF9C35;
    }

    .activity-color-bg {
        background: #FF9C35;
    }

    .cart-list-box {
        background: #FFFFFF;
        display: flex;
        font-size: 15px;
        height: 60px;
        border-bottom: 1px #E3E3E3 solid;
    }

    .list-info {
        width: 60%;
        padding: 5px 12px;
    }

    .list-info-size {
        padding-top: 10px;
        color: #B1B1B1;
    }

    .icon-li-circle {
        margin-left: 15px;
        font-size: 20px
    }

    .arrow {
        position: absolute;
        right: 0px;
        bottom: 0;
    }

    .font20 {
        font-size: 20px
    }

    .top-bar {
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        background: white;
    }

    .top-left-label {
        float: left;
        margin-left: 10px;
    }

    .top-right-label {
        float: right;
        font-size: 13px;
        padding-right: 10px;
        position: relative;
    }

    .order-info {
        background: white;
    }

    .order-info-title {
        font-size: 12px;
        color: #969696;
        padding: 10px 12px;
        border-bottom: 1px #E3E3E3 solid;
    }

    .order-cut {
        height: 30px;
        line-height: 30px;
        padding-left: 10px;
        border-bottom: 1px #E3E3E3 solid;
    }

    .order-cut-dec {
        background: #F07474;
        font-size: 13px;
        color: white;
        padding: 2px
    }

    .order-cut-note {
        font-size: 14px;
        margin-bottom: 120px;
    }

    .order-cut-number {
        font-size: 15px;
        float: right;
    }

    .order-sum {
        height: 30px;
        line-height: 30px;
        padding: 5px 15px;
        font-size: 15px;
        border-bottom: 1px solid #E3E3E3;
    }

    .order-sum-number {
        font-size: 15px;
        float: right;
    }

    .note {
        padding: 5px 15px;
        background: white;
        margin-top: 10px
    }

    .note-text {
        width: 95%;
        font-size: 12px;
        background: #F2F2F2;
        padding: 10px;
        height: 60px;
    }
</style>
